<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style type="text/css">
        h3 {
            font-family: 'Microsoft Yahei';
        }

        p {
            font-size: 30px !important;
            letter-spacing: 2px;
            line-height: 50px !important;
            text-align: left;
        }

        B {
            color: rgb(195, 255, 219);
            font-size: 40px !important;
            font-weight: 500 !important;
        }

        a {
            color: #fff !important;
        }
    </style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>【JS-task01】</h2>

            <h3>JS有哪些数据类型和常用方法？</h3>

            <h3>小课堂</h3>

            分享人：钟楚炯
        </section>
        <section>
            <p style="text-align: center;">目录</p>
            <p style="text-align: center;">1.背景介绍</p>
            <p style="text-align: center;">2.知识剖析</p>
            <p style="text-align: center;">3.常见问题</p>
            <p style="text-align: center;">4.解决方案</p>
            <p style="text-align: center;">5.编码实战</p>
            <p style="text-align: center;">6.扩展思考</p>
            <p style="text-align: center;">7.参考文献</p>
            <p style="text-align: center;">8.更多讨论</p>
        </section>
        <!--1.背景介绍-->
        <section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <p>JavaScript 一种直译式脚本语言，是一种动态类型、弱类型.基于原型的语言。所谓的弱类型语言，是相对强类型语言来说的，在强类型语言中，变量类型有多种，例如int char float boolean 等不同的类型,相互转换有时需要强制转换而javascript只有一种类型var ，为变量赋值时会自动判断类型并进行转换。
                </p>
            </section>
        </section>
        <!--2.知识剖析-->
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <!--2.1 JS有哪些数据类型？-->
        <section>
            <section><B>2.1 JS有哪些数据类型？</B></section>
            <section>

                    <p>JavaScript 的数据类型，共有6种。分别是undefined、null、boolean、number、string、object</p>
                    <p>JavaScript 语言的每一个值，都属于某一种数据类型。</p>

            </section>
            <section>
                <div style="text-indent:2em">
                    <p style="text-align: left">
                        1）Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。</p>
                    <p style="text-align: left">
                        2）Null：Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。</p>
                    <p style="text-align: left">
                        3）Boolean：即布尔类型，该类型有两个值：true和false。需要注意的是，Boolean类型的字面值true和false是区分大小写的。也就是说，True和False(以及其它的混合大小形式)都不是Boolean值，只是标识符。</p>
                </div>
            </section>
            <section>
                <div style="text-indent:2em">
                    <p style="text-align: left">
                        4）Number：该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。</p>
                    <p style="text-align: left">
                        5）String：String类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。</p>
                    <p style="text-align: left">
                        6）Object：Object类型，称为对象，是一组数据和功能（函数）的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名（包含空字符串在内的任意字符串）的属性。</p>
                </div>
            </section>
            <section><B>2.2 JS数据类型的常用方法</B></section>
            <section>
                <div style="text-indent:2em">
                    这里介绍7种：Boolean()、isNaN()、Number()、parseInt()、parseFloat()、toString()、String()。
                </div>
            </section>
            <section>
                <p style="text-align: center;">Boolean()</p>
                <p>可以对任何数据类型的值调用Boolean函数，而且总会返回一个Boolean值。至于返回的是这个值是true还是false，取决于要转换值的数据类型及其实际值。</p>
            </section>
            <section>
                <p style="text-align: center;">isNaN()</p>
                <p>NaN:即Not a Number，表明这个数值不是数字，表明本来要返回数值的操作数未返回数值的情况。特点：与任何值都不相等，包括NaN本身。</p>
                <p>isNaN();函数
                    接收一个参数，判断这个参数是否不是数值，不是数值返回true。</p>
            </section>
            <section>
                <p>Number()</p>
                <p>Number() 函数把对象的值转换为数字。</p>
            </section>
            <section>
            <p>parseint()</p>
            <p>同Number()函数，把对象的值转换为数字，可以加多一个表明进制的参数</p>
            <p>区别：一是对空字符返回NAN，而Number()函数返回0</p>
            <p>二是会忽略字符后面的非字符</p>
        </section>
            <section>
                <p>parseFloat()</p>
                <p>同Number()函数类似，区别就是只识别十进制，不会忽略第一个小数点</p>
            </section>
            <section>
                <pre>
                <code style="height: 400px;">
                    //Number() 把对象的值转换为数字。
                    //我们将尝试把不同的对象转换为数字。
                    var test1= new Boolean(true);
                     var test2= new Boolean(false);
                     var test4= new String("999");
                     var test5= new String("1.1");
                     var test6= new String("0xf");
                     var test7= new String("");
                     var test8= new String("11 54");

                     document.write(Number(test1));//1
                     document.write(Number(test2));//0
                     document.write(Number(test4));//999
                     document.write(Number(test5));//1.1
                     document.write(Number(test6));//15
                     document.write(Number(test7));//0
                     document.write(Number(test8));//NaN

                    //parseInt() 可解析一个字符串，并返回一个整数。
                    //我们将使用 parseInt() 来解析不同的字符串，着重于其是否数值模式，
                    parseInt("12345red");//返回 12345
                    parseInt("");//返回 NaN
                    parseInt("22.5");//返回 22
                    parseInt("070");//返回 56(八进制解析)
                    parseInt("70");//返回 70(十进制解析)
                    parseInt("0xf");//返回 56(十六进制解析)

                    parseInt("10");//返回 10(默认十进制)
                    parseInt("19",10);//返回 19 (10+9)(按十进制解析)
                    parseInt("11",2);//返回 3 (2+1)(按二进制解析)
                    parseInt("17",8);//返回 15 (8+7)(按八进制解析)
                    parseInt("1f",16);//返回 31 (16+15)(按十六进制解析)

                    //parseFloat() 可解析一个字符串，一直解析到末尾，
                    //或者遇到一个无效的浮点数字为止。
                    //它始终都会忽略前导的零,只解析十进制。
                    parseFloat("12345red");//返回12345
                    parseFloat("0XA");//返回0
                    parseFloat("22.5");//返回22.5
                    parseFloat("22.34.5");//返回22.34
                    parseFloat("0908.5");//返回908.5

                    //toString() 可把一个逻辑值转换为字符串。
                    //把一个布尔值转换成字符串
                    var boo = new Boolean(true)
                    document.write(boo.toString()) //输出true
                    //可以传一个参数
                    var num=10;
                    alert(num.tostring());   //"10"
                    alert(num.tostring(2));   //"1010"
                    alert(num.tostring(8));   //"12"
                    alert(num.tostring(10));   //"10"
                    alert(num.tostring(16));   //"a"

                    //String() 把对象的值转换为字符串。
                    var test1= new Boolean(1);
                    var test2= new Boolean(0);
                    var test3= new Boolean(true);
                    var test4= new Boolean(false);
                    var test5= new Date();
                    var test6= new String("999 888");
                    var test7=12345;

                    document.write(String(test1)+ "<br/>");//true
                    document.write(String(test2)+ "<br/>");//false
                    document.write(String(test3)+ "<br/>");//true
                    document.write(String(test4)+ "<br/>");//false
                    document.write(String(test5)+ "<br/>");//Wed Oct 28 00:17:40 UTC+0800 2009
                    document.write(String(test6)+ "<br/>");//999 888
                    document.write(String(test7)+ "<br/>");//12345

                </code>
                </pre>
            </section>
        </section>


        <!--3.常见问题-->
        <section>
            <h3>3.常见问题</h3>
        </section>
        <section>
            <B>怎么样判断各种数据类型？</B>
        </section>
        <!--4.解决方案-->
        <section>
            <h3>4.解决方案</h3>
        </section>
        <section>
            <section>
                <div style="text-indent:2em">
                    这里介绍2种方法：typeof、instanceof.
                </div>
            </section>
            <section>
                <section>
                    <div style="text-indent:2em">
                        1）typeof：是一个一元运算，放在一个运算数之前，运算数可以是任意类型。

                        它返回值是一个字符串，该字符串说明运算数的类型。,有两种写法：typeof xxx ,typeof(xxx)
                    </div>
                    <pre>
                        <code>
            var a = 100; console.log(typeof a); //输出 number
            var a = 'hello'; console.log(typeof a); //输出 string
            var a = true; console.log(typeof a); //输出 boolean
            var a = undefined; console.log(typeof a); //输出 undefined
            var a = null; console.log(typeof a); //输出 object
            var a = new Object(); console.log(typeof a); //输出 object
            var a = Object; console.log(typeof a) //输出 function
                        </code>
                    </pre>
                </section>
            </section>
            <section>
                <div style="text-indent:2em">
                    总结：如果右边的是基本类型，则typeof会尝试得到最基本的类型，比如number,string等等，如果是函数名，那么则返回function，这里Object，Number，String，等等都可以看成函数名，如果右边是一个基本的对象，则返回object(返回的都是小写哦）。
                    注：我们发现typeof null，结果返回了object，这是一个很早之前的BUG，一直沿用至今。
                    试用范围：如果通过typeof来判断类型，适用于判定基本类型，或者判断是否为函数（function)。
                </div>
            </section>
            <section>
                <div style="text-indent:2em">
                    2）instanceof,用于判断一个变量是否某个对象的实例，是一个三元运算---和typeof最实质上的区别 a instanceof b?alert("true"):alert("false") //注意b值是你想要判断的那种数据类型，不是一个字符串，比如Array：

                </div>
                <pre>
                     <code>
            var a = {};
            alert(a instanceof Object);  //true
            var b = [];
            alert(b instanceof Array);  //true
            var b = '123';
            alert(b instanceof String);  //false
            var c = new String("123");
            alert(c instanceof String);  //true
                     </code>
                </pre>
            </section>
            <section>
                <div style="text-indent:2em">
                    instanceof只能用来判断对象和函数，不能用来判断字符串和数字等。
                    instanceof还可以判断变量是否为数组。
                </div>
            </section>
        </section>
        <!--5.编码实战-->
        <section>
            <h3>5.编码实战</h3>
        </section>
        <!--6.拓展思考-->
        <section>
            <h3>6.拓展思考</h3>
        </section>
        <section>
            <p>数组类型属于哪种类型？</p>
        </section>
        <section>
            <pre>
                     <code>
                            var a=[];
                            alert(typeof a)  //Object
                     </code>
                </pre>
        </section>
        <section>
            <h3>7.参考文献</h3>
            <section>
                <p style="text-align: center">w3c：<a href="http://www.w3school.com.cn/js/js_datatypes.asp"
                                                     target="_blank">JavaScript数据类型</a>
                <p style="text-align: center">脚本之家：<a href="http://www.jb51.net/article/91477.htm" target="_blank">js判断各种数据类型的方法</a>
                <p style="text-align: center">阮一峰：<a href="http://javascript.ruanyifeng.com/#introduction"
                                                     target="_blank">Javascript标准参考</a>
            </section>
        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>
        <section>
            <p style="text-align: center">感谢大家观看
            <p style="text-align: center">
                <small>BY : 钟楚炯</small>
                <small>鸣谢 : 郭健锋|陈中彬</small>
        </section>
        <script src="../lib/reveal/js/head.min.js"></script>
        <script src="../lib/reveal/reveal.js"></script>
    </div>
</div>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                    hljs.initHighlightingOnLoad();
                }
            }
        ]
    });
</script>
</body>
</html>
